<template>
  <div class="text-sm dark:text-zinc-100">
    <div
      class="flex items-center justify-between p-1.5 bg-[#f2f2f2] dark:bg-[#2a74d0] dark:text-[#fff]"
    >
      <span class="font-bold">患者信息</span>
      <span
        class="bg-[#2b9939] text-zinc-100 p-[6px] text-sm"
        @click="handleBack"
        >返回</span
      >
    </div>
    <m-row
      :list="[
        { name: '姓名', value: examDetail?.name },
        { name: '性别', value: examDetail?.sex }
      ]"
    ></m-row>
    <m-row
      :list="[
        { name: '年龄', value: examDetail?.age },
        { name: '住院号', value: examDetail?.inPatientNo }
      ]"
    ></m-row>
    <m-row
      :list="[
        { name: '电话', value: examDetail?.phone },
        { name: '门诊号', value: '' }
      ]"
    ></m-row>
    <div class="relative flex items-center p-2 bg-[#f2f2f2] dark:bg-[#2a74d0] dark:text-[#fff]">
      <span class="font-bold">
        <span>检查信息</span>
        <span
          v-if="examDetail?.moduleName === 'RIS'"
          class="bg-[#189f93] text-zinc-100 p-[6px] text-sm rounded-sm absolute right-1 top-[50%] translate-y-[-50%]"
          @click="handleViewImage(examDetail?.id, examDetail?.moduleName)"
          >影像</span
        >
      </span>
    </div>
    <m-row
      :list="[
        { name: '设备类型', value: examDetail?.machineType },
        { name: '设备名称', value: examDetail?.machineName }
      ]"
    ></m-row>
    <m-row
      :list="[
        { name: '检查分组', value: examDetail?.viscGroup },
        { name: '检查方法', value: examDetail?.examMethod }
      ]"
    ></m-row>
    <m-row
      :list="[
        { name: '检查部位', value: examDetail?.visceras },
        { name: '报告时间', value: examDetail?.examDate }
      ]"
    ></m-row>
    <m-row
      :list="[
        { name: '申请医生', value: examDetail?.fromDocName },
        { name: '申请科室', value: examDetail?.fromDeptName }
      ]"
    ></m-row>
    <m-row :list="[{ name: '影像所见', value: examDetail?.describes }]"></m-row>
    <m-row :list="[{ name: '诊断意见', value: examDetail?.diagnosis }]"></m-row>
    <div class="flex items-center p-2 bg-[#f2f2f2] dark:bg-[#2a74d0] dark:text-[#fff]">
      <span class="font-bold">诊断图片</span>
    </div>
    <div v-if="examDetail?.imageBacks.length">
      <div v-for="(item, index) in examDetail?.imageBacks" :key="index">
        <img
          class="w-full"
          v-lazy="'http://172.16.1.105:5007/' + item.imageUri"
        />
      </div>
    </div>
    <div v-else class="text-center p-2 font-bold">此报告单上没有图像</div>
  </div>
</template>

<script setup lang="ts">
import ExamDetailServer from './service/index'
import { useRouter } from 'vue-router'
// import Row from './components/row.vue'
import useDiocmHooks from '@/hooks/useDiocmHooks'
const { storeRef, findExamDetail, examDetail } = ExamDetailServer
const { findDiocmView } = useDiocmHooks
const router = useRouter()

findExamDetail()

const handleViewImage = (id: any, moduleName: any) => {
  findDiocmView(id, moduleName)
}

const handleBack = () => {
  router.back()
}
</script>

<style scoped></style>
